<template>
    <section class="VideoFirstList-box">
        <app-header></app-header>

        <div class="main-content">
            <div class="container">
                <a-breadcrumb class="breadcrumb-box">
                    <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>海外直播</a-breadcrumb-item>
                </a-breadcrumb>
                <!-- 重点推荐 -->
                <div class="recommend-house-box">
                    <h4>直播美国优质房产</h4>
                    <img src="/static/img/emphasis-recommend.png" title="直播美国优质房产" alt="直播美国优质房产"/>
                    <a-row :gutter="32" v-show="!recommendHouseVideoNoDataShow">
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="li" v-for="(item, index) in RecommendHouseVideoItem" :key="index">
                            <a-card :title="null" hoverable :loading="RecommendHouseVideoLoading">
                                <router-link :to="{path: 'VideoHouseDetails', query: {videoId: item.id }}">
                                    <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                    <div class="font">
                                        <i class="iconfont icon-xuanchuanshipin"></i>
                                    </div>
                                </router-link>
                                <div class="bottom transition">
                                    <header class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</header>
                                    <p class="webkit-text-overflow-1lines">
                                        <span><i class="iconfont icon-yanjing2"></i> {{ isNull0(item.pageView) }}人在观看</span>
                                    </p>
                                </div>
                            </a-card>
                        </a-col>
                    </a-row>
                    <h5 style="text-align: center; padding: 15px;" v-show="recommendHouseVideoNoDataShow">暂未查询到数据！</h5>
                </div>

                <!-- 现场看房视频 -->
                <div class="house-video-box">
                    <h4>直播现场看房</h4>
                    <p>视频看项目，360°全方位买房</p>
                    <a-row :gutter="32" v-show="!HouseVideoNoDataShow">
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="left-one-big-img-box">
                            <figure>
                                <div class="inside">
                                    <router-link :to="{path: 'VideoHouseDetails', query: {videoId: HouseVideoOneBigImg.id }}">
                                        <img v-lazy="HouseVideoOneBigImg.photo" :title="HouseVideoOneBigImg.title" :alt="HouseVideoOneBigImg.title"/>
                                        <div class="font">
                                            <i class="iconfont icon-xuanchuanshipin"></i>
                                        </div>
                                    </router-link>
                                    <div class="bottom transition">
                                        <header class="webkit-text-overflow-1lines">{{ isNull0(HouseVideoOneBigImg.title) }}</header>
                                        <p class="webkit-text-overflow-1lines">
                                            <span><i class="iconfont icon-yanjing2"></i> {{ isNull0(HouseVideoOneBigImg.pageView) }}人在观看</span>
                                        </p>
                                    </div>
                                </div>
                            </figure>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="right-six-small-img-box">
                            <a-row :gutter="30">
                                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-six-small-img-li" v-for="(item, index) in HouseVideoSixSmallImgItem" :key="index">
                                    <div class="inside">
                                        <router-link :to="{path: 'VideoHouseDetails', query: {videoId: item.id }}">
                                            <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                            <div class="font"><i class="iconfont icon-xuanchuanshipin"></i></div>
                                            <p class="webkit-text-overflow-1lines">{{isNull0(item.title)}}</p>
                                        </router-link>
                                        <div class="bottom transition"><i class="iconfont icon-yanjing2"></i> {{isNull0(item.pageView)}}人观看</div>
                                    </div>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <router-link :to="{path: 'VideoSecondaryList', query: {type: 2 }}" v-show="!HouseVideoNoDataShow">
                        <a-button type="primary" size="large"><i class="iconfont icon-qianwang1"></i> 查看更多</a-button>
                    </router-link>
                    <h5 style="text-align: center; padding: 15px;" v-show="HouseVideoNoDataShow">暂未查询到数据！</h5>
                </div>

                <!-- 展会活动视频 -->
                <div class="exhibition-video-box">
                    <h4>直播展会活动</h4>
                    <p>直击讲座现场，获取海量房产知识</p>
                    <a-row :gutter="32" v-show="!ExhibitionVideoNoDataShow">
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="left-one-big-img-box">
                            <figure>
                                <div class="inside">
                                    <router-link :to="{path: 'VideoExhibitionDetails', query: {videoId: ExhibitionVideoOneBigImg.id }}">
                                        <img v-lazy="ExhibitionVideoOneBigImg.photo" :title="ExhibitionVideoOneBigImg.title" :alt="ExhibitionVideoOneBigImg.title"/>
                                        <div class="font">
                                            <i class="iconfont icon-xuanchuanshipin"></i>
                                        </div>
                                    </router-link>
                                    <div class="bottom transition">
                                        <header class="webkit-text-overflow-1lines">{{ isNull0(ExhibitionVideoOneBigImg.title) }}</header>
                                        <p class="webkit-text-overflow-1lines">
                                            <span><i class="iconfont icon-yanjing2"></i> {{ isNull0(ExhibitionVideoOneBigImg.pageView) }}人在观看</span>
                                        </p>
                                    </div>
                                </div>
                            </figure>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="right-six-small-img-box">
                            <a-row :gutter="30">
                                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-six-small-img-li" v-for="(item, index) in ExhibitionVideoSixSmallImgItem" :key="index">
                                    <div class="inside">
                                        <router-link :to="{path: 'VideoExhibitionDetails', query: {videoId: item.id }}">
                                            <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                            <div class="font"><i class="iconfont icon-xuanchuanshipin"></i></div>
                                            <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                                        </router-link>
                                        <div class="bottom transition"><i class="iconfont icon-yanjing2"></i> {{ isNull0(item.pageView) }}人观看</div>
                                    </div>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <router-link :to="{path: 'VideoSecondaryList', query: {type: 1 }}" v-show="!ExhibitionVideoNoDataShow">
                        <a-button type="primary" size="large"><i class="iconfont icon-qianwang1"></i> 查看更多</a-button>
                    </router-link>
                    <h5 style="text-align: center; padding: 15px;" v-show="ExhibitionVideoNoDataShow">暂未查询到数据！</h5>
                </div>

                <!--华美优胜精彩报道-->
                <div class="HMYS-GoodReport-box">
                    <h4>华美优胜的媒体报道</h4>
                    <p>精彩报道，精彩无限</p>
                    <a-row :gutter="32" v-show="!GoodReportVideoNoDataShow">
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="left-one-big-img-box">
                            <figure>
                                <div class="inside">
                                    <router-link :to="{path: 'VideoHMYSGoodReportDetails', query: {videoId: GoodReportVideoOneBigImg.id }}">
                                        <img v-lazy="GoodReportVideoOneBigImg.photo" :title="GoodReportVideoOneBigImg.title" :alt="GoodReportVideoOneBigImg.title"/>
                                        <div class="font">
                                            <i class="iconfont icon-xuanchuanshipin"></i>
                                        </div>
                                    </router-link>
                                    <div class="bottom transition">
                                        <header class="webkit-text-overflow-1lines">{{ isNull0(GoodReportVideoOneBigImg.title) }}</header>
                                        <p class="webkit-text-overflow-1lines">
                                            <span><i class="iconfont icon-yanjing2"></i> {{ isNull0(GoodReportVideoOneBigImg.pageView) }}人在观看</span>
                                        </p>
                                    </div>
                                </div>
                            </figure>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="right-six-small-img-box">
                            <a-row :gutter="30">
                                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-six-small-img-li" v-for="(item, index) in GoodReportVideoSixSmallImgItem" :key="index">
                                    <div class="inside">
                                        <router-link :to="{path: 'VideoHMYSGoodReportDetails', query: {videoId: item.id }}">
                                            <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                            <div class="font"><i class="iconfont icon-xuanchuanshipin"></i></div>
                                            <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                                        </router-link>
                                        <div class="bottom transition"><i class="iconfont icon-yanjing2"></i> {{ isNull0(item.pageView) }}人观看</div>
                                    </div>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <router-link :to="{path: 'VideoSecondaryList', query: {type: 3 }}" v-show="!GoodReportVideoNoDataShow">
                        <a-button type="primary" size="large"><i class="iconfont icon-qianwang1"></i> 查看更多</a-button>
                    </router-link>
                    <h5 style="text-align: center; padding: 15px;" v-show="GoodReportVideoNoDataShow">暂未查询到数据！</h5>
                </div>


            </div>
        </div>
        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import consultantTeam from '../../components/consultantTeam.vue';//公共组件——中美置业团队
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                RecommendHouseVideoItem: [], // 重点推荐房源视频列表
                recommendHouseVideoNoDataShow: false,//重点推荐房源视频列表——没有数据提示信息是否显示
                RecommendHouseVideoLoading: true,//重点推荐房源视频列表——加载loading

                HouseVideoOneBigImg: {}, //现场看房视频数据——左侧1张大图
                HouseVideoSixSmallImgItem: [], //现场看房视频数据——右侧6张小图
                HouseVideoNoDataShow: false,//现场看房视频数据—没有数据提示信息是否显示

                ExhibitionVideoOneBigImg: {}, //展会活动视频数据——左侧1张大图
                ExhibitionVideoSixSmallImgItem: [], //展会活动视频数据——右侧6张小图
                ExhibitionVideoNoDataShow: false,//展会活动视频数据—没有数据提示信息是否显示

                GoodReportVideoOneBigImg: {}, //华美优胜精彩报道视频数据——左侧1张大图
                GoodReportVideoSixSmallImgItem: [], //华美优胜精彩报道视频数据——右侧6张小图
                GoodReportVideoNoDataShow: false,//华美优胜精彩报道视频数据—没有数据提示信息是否显示

            }
        },
        metaInfo () {
            return {
                title: '美国房产视频_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '美国房产视频,美国房地产视频,美国旧金山房产高清视频,美国洛杉矶房产高清视频,美国加州房产高清视频,美国纽约房产高清视频' },
                    { vmid: 'description', name: 'description', content: '华美优胜美国房地产公司实地拍摄美国房产视频,美国房地产视频,美国旧金山房产高清视频,美国洛杉矶房产高清视频,美国加州房产高清视频,美国纽约房产高清视频' },

                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            this.getRecommendHouseVideoData();  // 获取重点推荐房源视频列表数据
            this.getHouseVideoListData(); // 获取现场看房视频数据列表
            this.getExhibitionVideoListData(); //获取展会活动视频数据列表
            this.getGoodReportVideoListData(); //获取华美优胜精彩报道视频数据列表

        },
        methods: {
            // 获取重点推荐房源视频列表数据
            getRecommendHouseVideoData(){
                this.$get('/video/list/2/1/10',{
                    sort: true,
                    isRecommend: true,
                }).then(res => {
                    this.RecommendHouseVideoLoading = false;
                    if (res.status == 0) {
                        this.RecommendHouseVideoItem = res.list.splice(0, 3);
                        this.recommendHouseVideoNoDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.recommendHouseVideoNoDataShow = true;
                    }
                })
            },
            // 获取现场看房视频列表数据
            getHouseVideoListData() {
                this.$get('/video/list/2/1/10',{
                    sort: true
                }).then(res => {
                    let picData = [];
                    if (res.status == 0) {
                        //过滤掉null的图片
                        picData = res.list.filter(item => {
                            return item.photo != null && item.photo != ''
                        });
                        this.HouseVideoOneBigImg = picData[0];
                        this.HouseVideoSixSmallImgItem = picData.splice(1, 6);
                        this.HouseVideoNoDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.HouseVideoNoDataShow = true;
                    }
                })
            },
            // 获取展会活动视频数据列表
            getExhibitionVideoListData() {
                this.$get('/video/list/1/1/10',{
                    sort: true
                }).then(res => {
                    let picData = [];
                    if (res.status == 0) {
                        //过滤掉null的图片
                        picData = res.list.filter(item => {
                            return item.photo != null && item.photo != ''
                        });
                        this.ExhibitionVideoOneBigImg = picData[0];
                        this.ExhibitionVideoSixSmallImgItem = picData.splice(1, 6);
                        this.ExhibitionVideoNoDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.ExhibitionVideoNoDataShow = true;
                    }
                })
            },
            // 获取华美优胜精彩报道视频数据列表
            getGoodReportVideoListData() {
                this.$get('/video/list/3/1/10',{
                    sort: true
                }).then(res => {
                    let picData = [];
                    if (res.status == 0) {
                        //过滤掉null的图片
                        picData = res.list.filter(item => {
                            return item.photo != null && item.photo != ''
                        });
                        this.GoodReportVideoOneBigImg = picData[0];
                        this.GoodReportVideoSixSmallImgItem = picData.splice(1, 6);
                        this.GoodReportVideoNoDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.GoodReportVideoNoDataShow = true;
                    }
                })
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            consultantTeam,//公共组件——中美置业团队
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #f7f9fa;
        .VideoFirstList-box {
            .main-content {
                padding: 30px 0;
                > .container {
                    >.breadcrumb-box{
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ddd;
                        margin-bottom: 20px;
                        a,
                        span,
                        .ant-breadcrumb-separator{
                            font-size: 16px;
                        }
                    }
                    // 重点推荐
                    >.recommend-house-box{
                        position: relative;
                        z-index: 5;
                        margin: 40px 0 0 0;
                        padding: 20px 35px 40px 35px;
                        -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
                        -webkit-transform: translate3d(0, 0px, -2px);
                        transform: translate3d(0, 1px, -2px);
                        >h4{
                            font-size: 30px;
                            color: #1769ac;
                            text-align: center;
                        }
                        >img{
                            position: absolute;
                            top: -20px;
                            left: -20px;
                            z-index: 8;
                        }
                        >.ant-row{
                            margin: 20px 0 0 0;
                            >.li{
                                margin: 20px 0;
                                .ant-card {
                                    border: none;
                                    background: #f7f9fa;
                                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    > .ant-card-body {
                                        padding: 0;
                                        > a {
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                            position: relative;
                                            overflow: hidden;
                                            background: #000;
                                            > img {
                                                width: 100%;
                                                height: 240px;
                                                -webkit-transition: all linear 1s;
                                                -moz-transition: all linear 1s;
                                                transition: all linear 1s;
                                            }
                                            > .font {
                                                width: 100%;
                                                height: 100%;
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                text-align: center;
                                                display: flex;
                                                flex-direction: column;
                                                justify-content: center;
                                                > i {
                                                    font-size: 30px;
                                                    color: #fff;
                                                    z-index: 9;
                                                    text-align: center;
                                                    -webkit-border-radius: 50%;
                                                    -moz-border-radius: 50%;
                                                    border-radius: 50%;
                                                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    display: inline-block;
                                                    opacity: 0;
                                                    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                                    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                                    -o-transition: -o-transform 0.3s, opacity 0.3s;
                                                    transition: transform 0.3s, opacity 0.3s;
                                                }
                                                > i:hover {
                                                    text-shadow: 0px 0px 16px #88f5f5;
                                                }
                                            }
                                        }
                                        > a:hover {
                                            > img {
                                                -webkit-transform: scale(1.1, 1.1);
                                                -moz-transform: scale(1.1, 1.1);
                                                transform: scale(1.1, 1.1);
                                                opacity: 0.5;
                                                filter: alpha(opacity=50);
                                            }
                                            > .font {
                                                > i {
                                                    opacity: 1;
                                                    -webkit-transform: scale(1);
                                                    -moz-transform: scale(1);
                                                    -ms-transform: scale(1);
                                                    -o-transform: scale(1);
                                                    transform: scale(1);
                                                }
                                            }
                                        }
                                        .bottom {
                                            padding: 10px 20px;
                                            border: 1px solid #eaebea;
                                            background: #fff;
                                            > header {
                                                font-size: 14px;
                                            }
                                            > p {
                                                font-size: 14px;
                                                > span {
                                                    margin: 0 8px;
                                                }
                                                > span:first-of-type {
                                                    margin: 0 8px 0 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            >.li:hover{
                                >.ant-card {
                                    -webkit-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                    -moz-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                    box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                }
                            }
                        }
                    }
                    // 房源项目视频、展会活动视频
                    >.house-video-box,
                    >.exhibition-video-box,
                    >.HMYS-GoodReport-box{
                        margin: 70px 0;
                        text-align: center;
                        >h4{
                            font-size: 30px;
                            color: #1769ac;
                            text-align: center;
                        }
                        >p{
                            font-size: 14px;
                            color: #888;
                            text-align: center;
                            margin-bottom: 0px;
                        }
                        >.ant-row{
                            text-align: left;
                            margin: 15px 0;
                            /*左侧1张大图*/
                            >.left-one-big-img-box{
                                margin: 12px 0 0 0;
                                >figure{
                                    >.inside{
                                        -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        >a {
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                            position: relative;
                                            overflow: hidden;
                                            background: #000;
                                            > img {
                                                width: 100%;
                                                height: 280px;
                                                -webkit-transition: all linear 1s;
                                                -moz-transition: all linear 1s;
                                                transition: all linear 1s;
                                            }
                                            > .font {
                                                width: 100%;
                                                height: 100%;
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                text-align: center;
                                                display: flex;
                                                flex-direction: column;
                                                justify-content: center;
                                                > i {
                                                    font-size: 30px;
                                                    color: #fff;
                                                    z-index: 9;
                                                    text-align: center;
                                                    -webkit-border-radius: 50%;
                                                    -moz-border-radius: 50%;
                                                    border-radius: 50%;
                                                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    display: inline-block;
                                                    opacity: 0;
                                                    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                                    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                                    -o-transition: -o-transform 0.3s, opacity 0.3s;
                                                    transition: transform 0.3s, opacity 0.3s;
                                                }
                                                >i:hover{
                                                    text-shadow: 0px 0px 16px #88f5f5;
                                                }
                                            }
                                            >p{
                                                width: 100%;
                                                position: absolute;
                                                bottom: 0;
                                                background: rgba(0,0,0,.4);
                                                font-size: 12px;
                                                color: #fff;
                                                padding: 0 0 0 12px;
                                                margin-bottom: 0px;
                                            }
                                        }
                                        >a:hover {
                                            > img {
                                                -webkit-transform: scale(1.1, 1.1);
                                                -moz-transform: scale(1.1, 1.1);
                                                transform: scale(1.1, 1.1);
                                                opacity: 0.5;
                                                filter: alpha(opacity=50);
                                            }
                                            > .font {
                                                > i {
                                                    opacity: 1;
                                                    -webkit-transform: scale(1);
                                                    -moz-transform: scale(1);
                                                    -ms-transform: scale(1);
                                                    -o-transform: scale(1);
                                                    transform: scale(1);
                                                }
                                            }
                                        }
                                        >.bottom{
                                            padding: 10px 20px;
                                            border: 1px solid #eaebea;
                                            background: #fff;
                                            >header{
                                                font-size: 14px;
                                            }
                                            >p{
                                                font-size: 14px;
                                                >span{
                                                    margin: 0 8px;
                                                }
                                                >span:first-of-type{
                                                    margin: 0 8px 0 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            /*右侧6张小图*/
                            > .right-six-small-img-box {
                                .right-six-small-img-li {
                                    padding: 0;
                                    margin: 12px 0 0 0;
                                    >.inside{
                                        -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        >a {
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                            position: relative;
                                            overflow: hidden;
                                            background: #000;
                                            > img {
                                                width: 100%;
                                                height: 140px;
                                                -webkit-transition: all linear 1s;
                                                -moz-transition: all linear 1s;
                                                transition: all linear 1s;
                                            }
                                            > .font {
                                                width: 100%;
                                                height: 100%;
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                text-align: center;
                                                display: flex;
                                                flex-direction: column;
                                                justify-content: center;
                                                > i {
                                                    font-size: 30px;
                                                    color: #fff;
                                                    z-index: 9;
                                                    text-align: center;
                                                    -webkit-border-radius: 50%;
                                                    -moz-border-radius: 50%;
                                                    border-radius: 50%;
                                                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                    display: inline-block;
                                                    opacity: 0;
                                                    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                                    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                                    -o-transition: -o-transform 0.3s, opacity 0.3s;
                                                    transition: transform 0.3s, opacity 0.3s;
                                                }
                                                >i:hover{
                                                    text-shadow: 0px 0px 16px #88f5f5;
                                                }
                                            }
                                            >p{
                                                width: 100%;
                                                position: absolute;
                                                bottom: 0;
                                                background: rgba(0,0,0,.4);
                                                font-size: 12px;
                                                color: #fff;
                                                padding: 0 0 0 12px;
                                                margin-bottom: 0px;
                                            }
                                        }
                                        >a:hover {
                                            > img {
                                                -webkit-transform: scale(1.1, 1.1);
                                                -moz-transform: scale(1.1, 1.1);
                                                transform: scale(1.1, 1.1);
                                                opacity: 0.5;
                                                filter: alpha(opacity=50);
                                            }
                                            > .font {
                                                > i {
                                                    opacity: 1;
                                                    -webkit-transform: scale(1);
                                                    -moz-transform: scale(1);
                                                    -ms-transform: scale(1);
                                                    -o-transform: scale(1);
                                                    transform: scale(1);
                                                }
                                            }
                                        }
                                        >.bottom{
                                            padding: 0 0 0 8px;
                                            border: 1px solid #eaebea;
                                            background: #fff;
                                            >header{
                                                font-size: 14px;
                                            }
                                            >p{
                                                font-size: 14px;
                                                >span{
                                                    margin: 0 8px;
                                                }
                                                >span:first-of-type{
                                                    margin: 0 8px 0 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        >button{
                            margin: 20px 0 0 0;
                            padding: 4px 20px;
                        }
                    }
                }
            }
        }
    }
</style>
